CSS3動起來

使用Css動畫相關屬性讓網頁開法可以專注在html5上面，再也不需要另外使用flash等動畫軟體來做編輯。並且可以讓動畫本身跟網頁內容更有關聯性。再接下來30天將會針對以下主題做詳細的說明以及範例。

• CSS Transition
• CSS Transforms: 分作2D, 3D
• CSS Animation
• SVG animation

CSS Transition

先來看看w3c怎麼形容Transition: CSS Transitions allows property changes in CSS values to occur smoothly over a specified duration. 簡單的說tranisition可以來做漸變的效果，關鍵字在於smoothly,以及duration。代表可以使物件的外觀平順地在特定的時間內，從A樣子變成B樣子。

trasition 語法範例

.example {
    transition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];
}

各property說明 transition properties列出如下：

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay

1. transition-property 這邊指的是需要漸變的css3屬性，像是長度或是寬度，顏色等等。 可以使用的值有

1. none : 無漸變
2. all: 所有跟物件相關的屬性
3. 需要漸變的屬性，可以寫多項使用,分隔。

2. transition-duration

完成漸變所需要的時間

3. transition-timing-function

timing-function比較難解釋，他算是轉換速度上面的時間函數，以我們指定的duration的長度為一個單位。在w3c可以看到詳細的說明。 css3事先定義好的timing function keyword有

• ease
• linear
• ease-in
• ease-out
• ease-in-out
• step-start
• step-end

另外外還有cubic-bezier() 以及 steps(), 詳細的解釋會在下一篇分享。 ###4. transition-delay 就是延遲啟動漸變的時間，單位有s跟 ms（千分之一秒）

transition 超簡單範例

在範例中我們使用:hover(當滑鼠移到物件上面時)來當作啟動transition的事件。 範例